<template>
  <view class="container">
    <!-- 图书信息头部 -->
    <view class="book-header">
      <image :src="bookInfo.cover" class="book-cover" />
      <view class="book-meta">
        <view class="title">{{bookInfo.title}}</view>
        <view class="author">{{bookInfo.author}}</view>
        <view class="stats">
          <text>共{{notes.length}}条笔记</text>
          <text v-if="lastUpdate">最后更新: {{formatDate(lastUpdate)}}</text>
          <text v-else>暂无更新记录</text>
        </view>
      </view>
    </view>

    <!-- 笔记列表 -->
    <view class="note-list">
      <view v-for="(note, index) in notes" :key="note.id" class="note-item" @click="showNoteDetail(note.id)">
        <view class="note-preview">
          <view class="note-title">{{note.title || '无标题笔记'}}</view>
          <view class="note-content">
            <view class="note-content-preview">{{getPreviewText(note.content)}}</view>
            <view class="note-status" :class="{
        'status-pending': note.status === 0,
        'status-approved': note.status === 1,
        'status-rejected': note.status === 2
      }">
              {{ getStatusText(note.status) }}
            </view>
          </view>
          <view class="note-meta">
            <text>{{formatDate(note.updateTime)}}</text>
            <text>{{note.content.length}}字</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        bookId: null,
        bookInfo: {},
        notes: [],
        activeNoteId: null,
      }
    },
    computed: {

      lastUpdate() {
        if (this.notes.length === 0) return null;

        // 找出所有笔记中最新的更新时间
        const latestNote = this.notes.reduce((latest, note) => {
          const currentTime = new Date(note.updateTime).getTime();
          const latestTime = latest ? new Date(latest.updateTime).getTime() : 0;
          return currentTime > latestTime ? note : latest;
        }, null);

        return latestNote.updateTime;
      }
    },
    onLoad(options) {
      const book = JSON.parse(decodeURIComponent(options.book))
      this.bookId = book.id
      this.bookInfo = book
      this.loadBookNotes()
    },
    methods: {
      // 获取状态对应的文本
      getStatusText(status) {
        return {
          0: '待审核',
          1: '已通过',
          2: '已拒绝'
        } [status] || ''
      },

      async loadBookNotes() {
        // 实际项目中这里调用API获取数据
        const {
          data
        } = await uni.$http.get(`/book/${this.bookId}/notes`)
        if (data.code !== 1) throw Error('获取图书笔记失败')
        this.notes = data.data
      },
      showNoteDetail(noteId) {
        uni.navigateTo({
          url: `/subpkg/note_info/note_info?id=${noteId}`
        })
      },
      formatDate(dateString) {
        const date = new Date(dateString)
        return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
      },
      getPreviewText(content) {
        const text = content.replace(/#[^\s]+/g, '').replace(/\n/g, ' ')
        return text.length > 50 ? text.substring(0, 50) + '...' : text
      }
    }
  }
</script>

<style lang="scss">
  .container {
    padding-bottom: 80px;
    background-color: #f5f5f5;
    min-height: 100vh;
  }

  /* 图书信息头部 */
  .book-header {
    display: flex;
    padding: 20px;
    background-color: #fff;
    border-bottom: 1px solid #eee;

    .book-cover {
      width: 80px;
      height: 110px;
      border-radius: 4px;
      margin-right: 15px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .book-meta {
      flex: 1;

      .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
        color: #333;
      }

      .author {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
      }

      .stats {
        display: flex;
        flex-direction: column;
        font-size: 12px;
        color: #999;

        text {
          margin-bottom: 3px;
        }
      }
    }
  }

  /* 笔记列表 */
  .note-list {
    padding: 10px;

    .note-item {
      background-color: #fff;
      border-radius: 8px;
      margin-bottom: 10px;
      padding: 15px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);


      .note-preview {
        .note-title {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 8px;
          color: #333;
        }

        .note-content {
          display: flex;
          overflow: hidden;

          .note-content-preview {
            width: 80%;
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .note-status {
            height: 30rpx;
            padding: 5px;
            margin-left: auto;
            font-size: 12px;
            border-radius: 4px;
            color: white;

            &.status-pending {
              background-color: #2979ff; // 橙色-待审核
            }

            &.status-approved {
              background-color: #4CAF50; // 绿色-已通过
            }

            &.status-rejected {
              background-color: #F44336; // 红色-已拒绝
            }
          }

        }

        .note-meta {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
</style>
